// =============================================
// Dockerfile 参数 HTML
// 包含基础镜像、常用指令、环境配置等参数
// =============================================

// Dockerfile 参数 HTML
const dockerfileParameters = `
<div class="parameter-group">
    <h3><i class="fas fa-box"></i> 基础镜像</h3>
    <button class="param-btn" data-command="FROM node:14-alpine">
        <i class="fab fa-node-js"></i> Node.js
    </button>
    <button class="param-btn" data-command="FROM python:3.9-slim">
        <i class="fab fa-python"></i> Python
    </button>
    <button class="param-btn" data-command="FROM openjdk:11-jre-slim">
        <i class="fab fa-java"></i> Java
    </button>
    <button class="param-btn" data-command="FROM nginx:alpine">
        <i class="fas fa-server"></i> Nginx
    </button>
    <button class="param-btn" data-command="FROM alpine:latest">
        <i class="fas fa-mountain"></i> Alpine Linux
    </button>
</div>

<div class="parameter-group">
    <h3><i class="fas fa-terminal"></i> 常用指令</h3>
    <div class="step-title">WORKDIR - 设置工作目录</div>
    <button class="param-btn" data-command="WORKDIR /app">
        <i class="fas fa-folder"></i> WORKDIR /app
    </button>
    
    <div class="step-title">COPY - 复制文件</div>
    <button class="param-btn" data-command="COPY package.json .">
        <i class="fas fa-copy"></i> COPY package.json .
    </button>
    <button class="param-btn" data-command="COPY . .">
        <i class="fas fa-copy"></i> COPY . .
    </button>
    
    <div class="step-title">RUN - 执行命令</div>
    <button class="param-btn" data-command='RUN apt-get update && apt-get install -y git'>
        <i class="fas fa-code"></i> RUN apt-get install
    </button>
    <button class="param-btn" data-command="RUN npm install">
        <i class="fas fa-code"></i> RUN npm install
    </button>
    
    <div class="step-title">EXPOSE - 暴露端口</div>
    <button class="param-btn" data-command="EXPOSE 80">
        <i class="fas fa-plug"></i> EXPOSE 80
    </button>
    <button class="param-btn" data-command="EXPOSE 3000">
        <i class="fas fa-plug"></i> EXPOSE 3000
    </button>
    
    <div class="step-title">CMD - 容器启动命令</div>
    <button class="param-btn" data-command='CMD ["npm", "start"]'>
        <i class="fas fa-play"></i> CMD ["npm", "start"]
    </button>
    <button class="param-btn" data-command='CMD ["python", "app.py"]'>
        <i class="fas fa-play"></i> CMD ["python", "app.py"]
    </button>
</div>

<div class="parameter-group">
    <h3><i class="fas fa-cogs"></i> 环境配置</h3>
    <div class="step-title">ENV - 设置环境变量</div>
    <button class="param-btn" data-command="ENV NODE_ENV=production">
        <i class="fas fa-code"></i> ENV NODE_ENV=production
    </button>
    <button class="param-btn" data-command="ENV PORT=3000">
        <i class="fas fa-code"></i> ENV PORT=3000
    </button>
    
    <div class="step-title">ARG - 构建参数</div>
    <button class="param-btn" data-command="ARG APP_VERSION=1.0.0">
        <i class="fas fa-code"></i> ARG APP_VERSION=1.0.0
    </button>
</div>

<div class="parameter-group">
    <h3><i class="fas fa-users"></i> 用户管理</h3>
    <div class="step-title">USER - 设置用户</div>
    <button class="param-btn" data-command="USER node">
        <i class="fas fa-user"></i> USER node
    </button>
    <button class="param-btn" data-command="USER nobody">
        <i class="fas fa-user"></i> USER nobody
    </button>
</div>

<div class="parameter-group">
    <h3><i class="fas fa-info-circle"></i> 元数据</h3>
    <div class="step-title">LABEL - 添加元数据</div>
    <button class="param-btn" data-command='LABEL maintainer="your-email@example.com"'>
        <i class="fas fa-tag"></i> LABEL maintainer
    </button>
    <button class="param-btn" data-command='LABEL version="1.0"'>
        <i class="fas fa-tag"></i> LABEL version
    </button>
</div>
`;